<template>
  <div class="search">
    <span style="margin-top: 20px; margin-left: 15px">
      潮位警戒值：<el-input
        v-model="WarnInput"
        style="width: 240px"
        :disabled="!isEditing"
        placeholder="Please input"
      />
    </span>
    <span style="margin-top: 20px; margin-left: 15px">
      <el-button
        v-if="!isEditing"
        type="primary"
        @click="changeNum"
        style="margin-left: 15px"
        >更改</el-button
      >
      <el-button
        v-else
        type="warning"
        @click="okEditing"
        style="margin-left: 15px"
        >确定</el-button
      >
      <el-button type="primary" style="margin-left: 15px">保存</el-button>
    </span>
  </div>
  <div>
    <div ref="chartRef" style="width: 900px; height: 500px"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref, onUnmounted, nextTick } from "vue";
import { getTideMonth, getTide24, getWarning } from "../../network/net.js";
import { formatTime } from "../../utils/cTime.js";

const chartRef = ref(null);
const WarnInput = ref();
const isEditing = ref(false);
const chartInstance = ref(null);

window.addEventListener("resize", () => {
  if (chartInstance.value) {
    chartInstance.value.resize();
  }
});

const changeNum = () => {
  isEditing.value = true;
};
const okEditing = () => {
  // 退出编辑模式
  isEditing.value = false;
  warningValue = WarnInput.value;
  let option = chartDataObj.getOption();
  option.series[0].markLine.data[0].yAxis = warningValue;
  chartDataObj.setOption(option);
};
let token = sessionStorage.getItem("token");
const tableTideData = ref([]);
const getChDate = (date) => {
  // 返回格式07月01日 16时
  let month = date.slice(5, 7);
  let day = date.slice(8, 10);
  let hour = date.slice(11, 13);
  return month + "月" + day + "日 " + hour + "时";
};
let arr1 = [];
let timeArr1 = [];
let valueArr1 = [];
const getData = () => {
  getTide24(token).then((res) => {
    tableTideData.value = res.data.data.map((item) => {
      return {
        forecastTime: getChDate(formatTime(item.time)),
        tide: Math.round(item.tideValue * 100),
      };
    });
    res.data.data.forEach((item, index) => {
      timeArr1.push(getChDate(formatTime(item.time)));
      valueArr1.push(Math.round(item.tideValue * 100));
    });
    nextTick(() => {
      initChart(timeArr1, valueArr1);
      getWarningValue();
    });
  });
};
let warningValue = 410;
let chartDataObj = null;
const initChart = (xAxisData, seriesData) => {
  // chartRef.value
  // document.getElementById("tide_chart_container")
  chartDataObj = echarts.init(chartRef.value);
  let option = {
    grid: { top: "40", left: "40", bottom: "40", right: "40" },
    xAxis: {
      type: "category",
      data: xAxisData,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: seriesData,
        type: "line",
        smooth: true,
        markLine: {
          data: [
            {
              yAxis: warningValue,
              name: "Avg",
              lineStyle: { color: "#FF0000", width: 1 }, // 样式： 线型、颜色、线宽}] type: 'solid',
            },
          ],
        },
      },
    ],
  };
  chartDataObj.setOption(option);
};
const getWarningValue = () => {
  // 获取警戒值
  getWarning().then((res) => {
    WarnInput.value = res.data.data.value;
    warningValue = res.data.data.value;
    let option = chartDataObj.getOption();
    option.series[0].markLine.data[0].yAxis = warningValue;
    chartDataObj.setOption(option);
  });
};

onMounted(() => {
  nextTick(() => {
    getData();
  });
});
</script>
<style lang="less" scoped>
.search {
  width: 90vw;
  height: 6vh;
  background-color: #00000000;
  margin-left: 30px;
  margin-top: 0px;
  margin-bottom: 20px;
  display: flex;
  align-content: center;
  text-align: center;
}
</style>
